
/**
 * 画柱状图
 *
 * @author  yangjinlai 20200217
 * zhaoying 20200827 从人事管理h5迁移至理顾宝-资产配置
 */


//图表的默认配置
import drawEcharts from './drawEcharts.js'

//图表所需颜色的默认配置
import drawColor from './drawColor.js'

import drawTable from './drawTable.js'

//that -- 传进来的Vue，也就是this
//options -- 传进来的各种配置，必传的参数包括：
	//id -- 图表容器
	//xData -- x轴数据
	//sData -- 画柱状图的数据，可以传多条，每条包括data，也可以传一个单纯的数组
//非必传的参数：
//grid、legend等都可以传进来，重置默认配置
//柱状图上面的文字，默认不展示，展示的话传
//label: {
//	show: true
//}
//
function drawBar( that, options ){

	//默认的series配置
	let defaultSeries = {
        type: 'bar',
        itemStyle: {
            barBorderRadius: options.radius ? options.radius : [50, 50, 0, 0],
        },
        barMaxWidth: that.$fontSize(1.08),
        label: {
        	show: false,
        	color: '#5E5E5E',
        	fontFamily: 'Helvetica',
        	position: 'top',
        	fontSize: that.$fontSize(0.24),
        	fontWeight: 'bold'
        },
        clip: false
    }

	let obj = {
	    color: options.color ? drawColor.barColor[options.color] : drawColor.barColor.type_1,
		grid: options.grid ? options.grid : {},
		xAxis : {},
	    yAxis : {},
	    legend: options.legend ? options.legend : {},
		series: [],
		// dataset:options.dataset ? options.dataset : [],
	}
	//如果需要俩个x轴 设置为数组 (咱们俩个x轴只是为了解决 2020第一周 这种数据的展示问题)
	if(options.xAxis.length){
		obj.xAxis = []
	}

    //如果需要俩个x轴 设置为数组 (咱们俩个x轴只是为了解决 2020第一周 这种数据的展示问题)
    if(options.xAxis.length){
        obj.xAxis = []
    }

	//将obj和drawEcharts合并
	let echartsObj = that.$utils.objCombine({} , drawEcharts.defaultObj( that ) );

	echartsObj = that.$utils.objCombine(echartsObj , obj );

	//给当前图表类型设置一个总类型
	echartsObj.echartsType = 'bar';

	// 当存在2个x轴时 echartsObj.xAxis里面需要分别合并配置
	if(options.xAxis.length){
		echartsObj.xAxis[0] = that.$utils.objCombine(options.xAxis[0] , drawEcharts.xAxis( that ) );
		echartsObj.xAxis[1] = that.$utils.objCombine(options.xAxis[1] , drawEcharts.xAxis( that ) );
		if(options.xAxis[1].axisLabel.formatter){//判断是否单独设置了字体的显示方法 如果设置了 就用options.xAxis[1]里的配置
			echartsObj.xAxis[1].axisLabel.formatter = options.xAxis[1].axisLabel.formatter
		}
	}else{
		//合并x轴，x轴配置需要单独合并
		echartsObj.xAxis = that.$utils.objCombine(echartsObj.xAxis , drawEcharts.xAxis( that ) );

		echartsObj.xAxis = that.$utils.objCombine(echartsObj.xAxis , options.xAxis );
	}

	//合并y轴，y轴配置需要单独合并
	echartsObj.yAxis = that.$utils.objCombine(echartsObj.yAxis , drawEcharts.yAxis( that ) );

	echartsObj.yAxis = that.$utils.objCombine(echartsObj.yAxis , options.yAxis );
	// 设置Y轴显示%,等标识
	echartsObj.yAxis.axisLabel.formatter=options.yUnit ? '{value}'+options.yUnit :'{value}'



	//合并series
	//如果sData是数组，数组里的第一条是对象
	if( that.$utils.getType(options.sData) == 'Array'
		&& options.sData.length
		&& options.sData[0].data
		){

		let showLabel = false;

		options.sData.forEach((item, index, arr) => {
			let sConfig = that.$utils.objCombine( defaultSeries, item );
			echartsObj.series.push(sConfig);

			if( item.label && item.label.show == true){
				//展示label
				showLabel = true;
			}
		})

		if( showLabel ){

			//如果是倒下的柱状图，且label需要展示出来，需要计算右边文字的长度
			if( echartsObj.xAxis.type == 'value' ){
				//获取series里文字最长的label
				let labelArr = [];

				echartsObj.series.forEach((item, index, arr) => {
					let lData = item.data.concat([]);
					labelArr.push(lData.sort(function (a,b) {
						let m = a + '',
							n = b + '';

				        return n.length - m.length;
				    })[0])
				})

				let maxLabel = labelArr.sort(function (a,b) {
			        // return a.length - b.length;
	        		let m = a + '',
	        			n = b + '';

	                return n.length - m.length;
			    });

			    if( maxLabel && maxLabel.length ){

			    	maxLabel = maxLabel[0] + '';

					//当前画图区域的宽度
					var width = options.id.getWidth() * 0.9;

					if(maxLabel == 0){
						var percent = '100';
					}else{
						var percent = that.$fontSize(0.24) * maxLabel.length / width * 100 ;
					}

					echartsObj.xAxis.boundaryGap = [0, percent + '%']
				}
			}
			else{

				//竖着的柱状图,当前画图区域的高度
				var height = options.id.getHeight() * 0.9;

				var percent = that.$fontSize(0.24)  / height * 100 ;

				echartsObj.yAxis.boundaryGap = [0, percent + '%']
			}
		}
	}
	else{
		echartsObj.series = that.$utils.objCombine( {}, defaultSeries );
		echartsObj.series = that.$utils.objCombine( echartsObj.series, options.sData );
	}

	//展示图例，且gird.bottom的底部距离是没有legend的位置时
	if( echartsObj.legend.show && echartsObj.grid.bottom == '5%'){
		echartsObj.grid.bottom = this.$fontSize(0.9);
	}

	//如果是倒下的柱状图
	if( echartsObj.xAxis.type == 'value' ){
		//防止x轴文字超出grid区域
		if( !( echartsObj.xAxis.axisLabel.rotate && echartsObj.xAxis.axisLabel.rotate != 0 )) {
			echartsObj.xAxis.axisLabel.align = 'right';
		}
	}

	//当柱状图为倒下的，且y轴为类目轴的时候，底上需要出现横向的灰条，此时需要将y轴的splitLine show设置为true
	if ( options.xAxis.type == 'value' && options.yAxis.type == 'category' ) {
		echartsObj.yAxis.splitLine.show = true;
	}


	//是否需要放大功能
	if( options.dataZoom ){
		echartsObj.dataZoom = options.dataZoom
	}



	//如果要展示表格
	if( options.table ){
		let dColor = options.color ? options.color : 'type_1';
		drawTable(options.id, dColor, echartsObj, options.headerData);
	}

	// console.log('bar', echartsObj)

	//画图
	options.id.setOption(echartsObj)

}

export default drawBar
